// 滚屏函数
onscroll = lazyLoad
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = lazyLoad

//监听页面滚动事件
function lazyLoad() {
  // 可视区域高度
  let clientHeight = document.documentElement.clientHeight
  //滚动区域高度
  let scollTop = document.documentElement.scrollTop
  console.log(clientHeight, scollTop)
  // 获取图片列表
  let lazy = document.getElementsByClassName('lazy')
  for (let i = 0; i < lazy.length; i++) {
    let top = getPoint(lazy[i])
    console.log(top)
    if (scollTop + clientHeight > top + 200) {
      lazy[i].src = lazy[i].getAttribute('imgSrc') // 获取自定义属性imgSrc，用真图片替换假图片
      lazy[i].removeAttribute('imgSrc')
      lazy[i].className = ''
    }
  }
}

//获取元素顶端到视口顶端的距离
let getPoint = (obj) => {
  let t = obj.offsetTop //距离页面顶端的距离
  while ((obj = obj.offsetParent)) {
    t += obj.offsetTop
  }
  return t
}